<template>
  <div class="login">
    <div class="header" ref="topimg">
      <div class="head clearfix">
        <a href="../" class="logo">
          <img src="../../assets/logos.png">
        </a>
      </div>
    </div>
    <div class="login-banner" ref="bannerimg">
      <img src="../../assets/login/login-banner.jpg" alt="">
      <div class="to-login">
        <h2>用户登录</h2>
        <div class="tips">
          <span class="tips-content" v-if="isTips">{{tipsContent}}</span>
        </div>
        <div class="form-list">
          <icon name="mobile" scale="2.3"></icon>
          <input type="text" placeholder="手机号码" v-model="mobileNum">

        </div>
        <div class="form-list">
          <icon name="lock" scale="2" style="vertical-align: middle;margin-top: 3px"></icon>
          <input type="password" placeholder="登录密码" v-model="password">

        </div>
        <!--<div class="forget-passwd">-->
        <!--<a href="#">忘记密码</a>-->
        <!--</div>-->
        <div class="login-now">
          <button @click="toLogin">立即登录</button>
        </div>
      </div>
    </div>
    <div class="introduce" :style="{height:introduceH +'px',minHeight:'320px'}">
      <div class="inner">
        <div class="ii-left">
          <div class="iil-each">
            <h3>关于我们</h3>
            <a>企业简介</a>
            <a>组织架构</a>
            <a>安全保障</a>
          </div>
          <div class="iil-each">
            <h3>新闻中心</h3>
            <a>企业新闻</a>
            <a>业界动态</a>
          </div>
          <div class="iil-each">
            <h3>投资咨询</h3>
            <a>网约车投资</a>
            <a>债权投资</a>
            <a>股权投资</a>
            <a>国内与海外保险与资产配置</a>
          </div>
        </div>
        <div class="middle-line"></div>
        <div class="ii-right">
          <div class="iir-code">
            <img src="../../assets/login/code.jpg" alt="">
            <p>扫一扫 关注我们</p>

          </div>
          <div class="concat-us">
            <h2>联系我们</h2>
            <p>
              <icon class="wordicon" name="phone-square" scale="1.7"></icon>
              服务热线:4000-667-222
            </p>
            <p>
              <icon class="wordicon" name="location-arrow" scale="1.7"></icon>
              总部地址:南京市秦淮区常府街29-7号
            </p>
          </div>
        </div>
      </div>
    </div>

    <div class="login-bottom" ref="bottomh">
      <p>版权所有 江苏汇瑞德资产管理有限公司 COPYRIGHT 2016. ALL RIGHTS RESERVED. 苏ICP备17064915号-1</p>
    </div>
    <!--<bottom></bottom>-->
  </div>
</template>

<script>
  import 'vue-awesome/icons'
  import Icon from 'vue-awesome/components/Icon'
  import VmInput from 'vue-multiple-input'
  import bottom from '@/components/bottom/bottom'
  import {mapGetters, mapActions} from "vuex"
  import http from '@/utils/http'
  import api from '@/utils/api'
  import swal from 'sweetalert2'


  export default {
    components: {
      Icon,
      bottom
    },
    data() {
      return {
        introduceH: 0,
        mobileNum: '',
        password: '',
        tipsContent: '',
        isTips: false
      }
    },
    computed: {
      isMobile() {
        return this.mobileNum && (/^1[3|4|5|8][0-9]\d{4,8}$/).test(this.mobileNum)
      },
      hasPassword() {
        return this.password !== ''
      }

    },
    methods: {
      toLogin() {

        if (!this.isMobile) {
          this.isTips = true;
          this.tipsContent = '请输入正确的手机号码!!!';
          return
        }
        if (!this.hasPassword) {
          this.isTips = true;
          this.tipsContent = '密码不为空!!!';
          return
        }
        this.$store.dispatch("Get", {
          url: api.toLogin,
          data: {
            mobilePhone: this.mobileNum,
            password: this.password

          },
          showstatus: true
        }).then((res) => {

          if (!res.data.code) {
            localStorage.setItem("userinfo", JSON.stringify(res.data));
            this.$router.push('account');
          } else {
            this.isTips = true;
            this.tipsContent = res.data.message;
          }
        })
      }
    },
    mounted() {
      setTimeout(() => {
        let wh = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
        let toph = this.$refs.topimg.offsetHeight,
          bannerh = this.$refs.bannerimg.offsetHeight,
          bottomh = this.$refs.bottomh.offsetHeight;
        this.introduceH = (wh - toph - bannerh - bottomh)
      }, 0)

    }
  }
</script>
<style scoped lang="scss">
  .header {
    background: #c8a64f url(../../assets/header_bg.jpg) no-repeat center;
    height: 88px;
    min-width: 1200px;
  }

  .head {
    width: 1200px;
    margin: 0 auto;
    height: 88px;
  }

  .head .logo {
    float: left;
    margin-top: 23px;
    margin-left: 10px;
  }

  .login {
    width: 100%;
    min-width: 1210px;
    height: 100%;
    background-color: #313131;
  }

  .login-top img {
    width: 100%;
    min-width: 1210px;
    height: auto;
    display: block;
  }

  .login-banner {
    position: relative;

  }

  .login-banner img {
    width: 100%;
    min-width: 1210px;
    height: auto;
    display: block;
  }

  .login-bottom {
    width: 100%;
    background-color: #b9963f;
    overflow: hidden;
    position: fixed;
    bottom: 0;
    left: 0;
    p {
      color: #ffffff;
      font-size: 12px;
      text-align: center;
      width: 100%;
      margin: 20px 0;
      font-weight: 600;
    }
  }

  .introduce {
    width: 100%;
    min-width: 1210px;

    .inner {
      width: 1200px;
      margin: 0 auto;
      overflow: hidden;
      .middle-line {
        width: 2px;
        height: 158px;
        background-color: #5e5e5e;
        float: left;
        margin-top: 50px;
      }
      .ii-left {
        width: 630px;
        float: left;
        .iil-each {
          display: inline-block;
          margin: 50px 45px 0;
          vertical-align: top;

          h3 {
            width: 100%;
            text-align: center;
            font-size: 20px;
            color: #ffffff;
            margin-bottom: 20px;
          }
          a {
            width: 100%;
            text-align: center;
            font-size: 14px;
            color: #7b7b7b;
            display: block;
            margin: 10px 0;

          }
        }
      }
      .ii-right {
        width: 568px;
        float: left;
        .iir-code {
          margin: 60px 0 0 78px;
          width: 90px;
          float: left;
          p {
            font-size: 12px;
            color: #7b7b7b;
            margin-top: 8px;
          }

        }
        .concat-us {
          float: left;
          margin-left: 55px;
          margin-top: 60px;
          h2 {
            color: #ffffff;
            text-align: left;
            margin-bottom: 20px;
          }
          p {
            color: #7b7b7b;
            text-align: left;
            vertical-align: middle;
            /*line-height: 34px;*/
            margin-top: 8px;
            .wordicon {
              vertical-align: middle;
              margin-right: 15px;
            }
          }
        }
      }
    }
  }

  .button {
    width: 50px;
    height: 30px;

  }

  .to-login {
    width: 378px;
    height: 305px;
    background-color: #ffffff;
    position: absolute;
    top: 50%;
    right: 10%;
    margin-top: -152px;
    .tips {
      width: 295px;
      font-size: 12px;
      font-weight: 600;
      text-align: left;
      margin: 5px auto 10px;
      /*float: left;*/
      span {

      }
    }
    h2 {
      font-size: 20px;
      color: #5f5e5e;
      margin: 30px 0 25px;
    }
    .form-list {
      width: 295px;
      height: 40px;
      border: 1px solid #818081;
      border-radius: 4px;
      margin: 0 auto 20px;
      input {
        width: 250px;
        height: 38px;
        border: none;
        vertical-align: top;
        text-indent: 10px;
        font-size: 14px;
      }
      icon {
        margin-left: 10px;
      }
    }
    .forget-passwd {
      text-indent: 250px;
      color: #5f5e5e;
      font-size: 12px;
      margin-top: 20px;
    }
    .login-now {
      width: 250px;
      height: 40px;
      margin: 10px auto 0;
      border-radius: 6px;
      button {
        width: 250px;
        height: 40px;
        background-color: #c12b2b;
        color: #ffffff;
        font-size: 18px;
        border-radius: 6px;
        cursor: pointer;
      }
    }
  }
  @media (max-width: 1400px) {
    .to-login {
      width: 320px;
      height: 260px;
      background-color: #ffffff;
      position: absolute;
      top: 50%;
      right: 10%;
      margin-top: -130px;
      .tips {
        width: 295px;
        font-size: 12px;
        font-weight: 600;
        text-align: left;
        margin: 5px auto 10px;
        /*float: left;*/
        span {

        }
      }
      h2 {
        font-size: 18px;
        color: #5f5e5e;
        margin: 20px 0 18px;
      }
      .form-list {
        width: 295px;
        height: 40px;
        border: 1px solid #818081;
        border-radius: 4px;
        margin: 0 auto 20px;
        input {
          width: 250px;
          height: 38px;
          border: none;
          vertical-align: top;
          text-indent: 10px;
          font-size: 14px;
        }
        icon {
          margin-left: 10px;
        }
      }
      .forget-passwd {
        text-indent: 250px;
        color: #5f5e5e;
        font-size: 12px;
        margin-top: 20px;
      }
      .login-now {
        width: 250px;
        height: 40px;
        margin: 10px auto 0;
        border-radius: 6px;
        button {
          width: 250px;
          height: 40px;
          background-color: #c12b2b;
          color: #ffffff;
          font-size: 16px;
          border-radius: 6px;
          cursor: pointer;
        }
      }
    }
  }
</style>
